<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>找回密码</title>

    <link rel="stylesheet" type="text/css" href="../../css/retrieve/iconfont.css">
	<script src="../../script/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../../js/itnetcao.js"></script>
    <style type="text/css">
      *{margin: 0px; padding: 0px;}
      body{
        background-color: rgb(242, 242, 242);
      }
      #top{
        width: 10.25rem;
        height: 1rem;
        background-color: rgb(255, 198, 17);
        font-size: 0.8rem;
        text-align: center;
        line-height: 1rem;
      }
      #top span{
        display:inline-block;
        height: 0.8rem;
        margin-left: -3.5rem;
        margin-right: 2.5rem;
        position: relative;
        top: -0.1rem;
      }
      .new{
        width: 10.25rem;
        font-size: 0.4rem;
        height: 1.2rem;
        line-height: 1.2rem;
        margin-top: 0.5rem;
        background-color: #fff;
      }
      .prompt{
        display:inline-block;
        width: 2.0rem;
      }
      .inp{
        width: 5rem;
        height: 1.1rem;
      }
      #d_yzm{
        font-size: 0.4rem;
        height: 1.2rem;
        line-height: 1.2rem;
        margin-top: 0.2rem;
        background-color: #fff;
        width:7.8rem;
        display:inline-block;
      }
      #but_yzm{
        display:inline-block;
        width: 2.38rem;
        height: 1.24rem;
        margin-left: -0.3rem;
        margin-top: 0.5rem;
        background-color: rgb(255, 198, 17);
        text-align: center;

      }
      input{
        outline-color: #ffffff;
        border: none;
      }
      #ok{
        width: 8rem;
        height: 1rem;
        margin-top: 8rem;
        margin-left: 1.1rem;
        border-radius: 0.5rem;
        border: none;
        text-align: center;
        background-color: rgb(255, 198, 17);
        font-family: SimHei;
        color: #fff;
        font-size: 0.5rem;
        outline-color: #ffffff;
      }
    </style>
</head>
<body>
    <div id="top">
      <span class="iconfont icon-fanhui" onclick="window.location.href='../login/login.html'"></span>
      找回密码
    </div>
    
    <div class="new">
      <div class="prompt">手机号码</div>
      <input type="text" class="inp iphone" placeholder="请输入手机号"/>
    </div>

    <div class="new">
      <div class="prompt">新密码</div>
      <input type="password" class="inp passwords" placeholder="请输入新密码" id="pwd"/>
    </div>

    <div class="new">
      <div class="prompt">确认新密码</div>
      <input type="password" class="inp newPasswords" placeholder="请确认新密码" id="pwd2"/>
    </div>

    <div id="d_yzm">
      <div class="prompt">验证码</div>
      <input type="text" class="inp iphoneCode" placeholder="请输入手机验证码" id="yzm"/>
    </div>
      <input type="button" class='getIphoneCode' value="获取验证码" id="but_yzm" readonly="readonly"/>

    <div>
      <input type="button" value="确认" id="ok" onclick="f1()"/>
    </div>

    <script>
    		var a_count = 120;
  			(function() {
  				var supportsOrientationChange = 'onorientationchange' in window ? 'orientationchange' : 'resize';
  				var timeoutId;

  				function setRem() {
  					var clientWidth = document.documentElement.clientWidth;
  					var nowPX = (clientWidth-20) / 1024 * 100;
  					document.documentElement.style.fontSize = nowPX + 'px';
  				}

  				setRem();
  				window.addEventListener(supportsOrientationChange, function() {
  					clearTimeout(timeoutId);
  					timeoutId = setTimeout(function() {
  						setRem();
  					}, 300);
  				}, false);
  				
  				
  				$(".getIphoneCode").click(function() {
					if($(".getIphoneCode").val() != "获取验证码") {
						return;
					}
					if($(".iphone").val().trim().length == 0) {
	  					alert("请输入手机号码.");
	  					return;
	  				}
	  				if($(".iphone").val().trim().length != 11) {
	  					alert("请输入正确的手机号码.");
	  					return;
	  				}
	  				var n = setInterval(function() {
	  					a_count--;
	  					if(a_count <= 0) {
	  						$(".getIphoneCode").val("获取验证码")
	  						window.clearInterval(n);
	  						return;
	  					}
	  					$(".getIphoneCode").val(a_count + "重新获取.")
	  				}, 1000)
					var url = localStorage.getItem("url") + "/user/controller/getUserIPhoneCodeAPP.do";
	  				var data = "iphone=" + $(".iphone").val();
	  				itcao.itGetAjaxBigData(url, data).done(function(result) {
	  					var json = jQuery.parseJSON(result);
	  					if(json.state == true) {
	  						alert("验证码获取成功.");
	  						localStorage.setItem("user_iphone_code", json.bean);
	  					}else {
	  						alert("验证码获取失败.");
	  					}
	  				})
				})
  				
  				
  			})();
			
			
  			function f1(){
  				if($(".iphone").val().trim().length == 0) {
  					alert("请输入手机号码.");
  					return;
  				}
  				if($(".iphone").val().trim().length != 11) {
  					alert("请输入正确的手机号码.");
  					return;
  				}
  				if($(".passwords").val().trim().length == 0) {
  					alert("请输入新的密码.");
  					return;
  				}
  				if($(".passwords").val().trim() != $(".newPasswords").val().trim()) {
  					alert("两次输入的密码不一致.");
  					return;
  				}
  				if($(".iphoneCode").val().trim().length == 0) {
  					alert("请输入手机验证码.");
  					return;
  				}
  				if(localStorage.getItem("user_iphone_code") != $(".iphoneCode").val().trim()) {
  					alert("验证码输入错误,请重新输入.");
  					return;
  				}
  				var url = localStorage.getItem("url") + "/user/controller/UpdateUserLoginPassword.do";
  				var data = "userIphone=" + $(".iphone").val().trim() + "&userPassword=" + $(".passwords").val().trim() + "&newLoginPas=" + $(".newPasswords").val().trim();
  				itcao.itGetAjaxBigData(url, data).done(function(result) {
  					var json = jQuery.parseJSON(result);
  					if(json.state == true) {
  						alert("修改成功.");
  						setTimeout(function() {
  							window.location.href = "../login/login.html";
  						}, 500)
  					}else {
  						alert(json.value);
  					}
  				})
  			};
  		</script>
  		<style>
  		body{margin:10px;}
  		</style>
</body>
</html>
